const gulp = require('gulp')
const spritesmith = require('gulp.spritesmith')
const path = require('path')
const fse = require('fs-extra')

// 雪碧图入口路径
const basePath = './static'


// 过滤掉无效的目录
const filterFolds = function (foldsArr, sonPath) {
    const filters = new Set(['js', 'css', 'img', 'font', 'fonts']) // 这类文件夹不处理
    let curArr = [...new Set(foldsArr.filter(x => !filters.has(x)))]
    if (curArr.length) {
        // 路径含有.的不认为是目录
        curArr = curArr.filter((pathStr) => {
            if (pathStr.indexOf('.') < 0) {
                return pathStr
            }
        })
    }
    return curArr
}


// 处理雪碧图的函数
const makeSprite = function (foldsArr, basePath) {
    // 循环文件目录，处理雪碧图
    foldsArr.forEach((foldName) => {
        if (foldName != 'sprite') return;
        // 拼接子文件夹
        const sonPath = basePath + '/' + foldName
        const spritePath = sonPath

        // 该目录下存在sprite目录的才处理
        if (fse.existsSync(spritePath)) {
            console.log('gulp[sprite-task]: building (' + spritePath + ') sprites.')
            gulp.src(spritePath + '/*').pipe(spritesmith({
                imgName: '../sprite.png', // 合并后大图的名称
                imgPath: '../../static/sprite.png',
                cssName: '../../common/sprite/sprite.css', // 合并后css的名称
                padding: 10, // 每个图片之间的间距，默认为0px
                cssTemplate: (data) => {
                    // data为对象，保存合成前小图和合成后大图的信息					
                    let arr = []
                    let width = data.spritesheet.width + 'rpx'
                    let height = data.spritesheet.height + 'rpx'
                    let url = data.spritesheet.image
                    data.sprites.forEach((sprite) => {
                        let posX = sprite.px.offset_x.replace('px', 'rpx')
                        let posY = sprite.px.offset_y.replace('px', 'rpx')
                        if (posX == '0px') posX = 0
                        if (posY == '0px') posY = 0
                        if ((/-bak$/.test(sprite.name))) { // 处理hover图的坐标位置
                            arr.push('\n$sprite-' + sprite.name + ': ' + posX + ' ' + posY + ';\n')
                        } else {
                            // 处理正常图的坐标位置
                            arr.push(
                                '\n.sprite-' + sprite.name
                                    + ' {\n'
                                        + '\tbackground: url(' + url + ') no-repeat ' + posX + ' ' + posY + ';\n'
                                        + "\tbackground-size: " + width + " " + height + ";\n"
                                        + '\twidth: ' + sprite.px.width.replace('px', 'rpx') + ';\n'
                                        + '\theight: ' + sprite.px.height.replace('px', 'rpx') + ';\n'
                                    + '}\n',
                            )
                        }
                    })                    
                    return arr.join('')
                },
            })).pipe(gulp.dest(sonPath))
        } else {
            console.log('gulp[sprite-task]: ' + spritePath + 'is not exists, check it!!')
        }

        // 子目录下还含有二级目录，继续递归处理
        let nextArr = fse.readdirSync(sonPath, 'utf8')
        if (nextArr.length) {
            nextArr = filterFolds(nextArr, sonPath)
            nextArr.length && makeSprite(nextArr, sonPath)
        }
    })
}


// 雪碧图处理的任务入口
gulp.task('sprite', done => {
    if (fse.existsSync(basePath)) { // 获取需要处理的雪碧图目录
        let foldsArr = fse.readdirSync(basePath, 'utf8')
        // console.log('gulp[sprite-task]: foldsArr (' + basePath + '), folds length is ' + foldsArr.length + '.')
        if (foldsArr.length) { // entry下存在子目录，分别执行雪碧图合并任务
            foldsArr = filterFolds(foldsArr, basePath)
            foldsArr.length && makeSprite(foldsArr, basePath)
        } else {
            console.error('gulp[sprite-task]: folds length is 0!!!')
        }
    } else {
        console.error('gulp[sprite-task]: basePath (' + basePath + ') is not exists!!!')
    }
    done()
})
